<template>
    <n-card title="最新问题" style="width: 600px;">
    <template #header-extra><n-button text type="info" @click="link2question"> 更多>></n-button></template>
        <n-space vertical v-for="question in questions" :key="question.question_id" style="gap: 40px;">
            <n-space align="center" justify="space-between">
                <n-button text @click="link2questionnum(question.name)" size="large">
                    {{ question.question_id }}
                </n-button>
                <n-tag :type="getDifficultyColor(question.difficulty)">{{ question.difficulty }}</n-tag>
                <n-button text @click="link2questionnum(question.name)" size="small">
                    <n-ellipsis style="width: 150px;">{{ question.name }}</n-ellipsis>
                </n-button>
            </n-space>
        </n-space>
    </n-card>
</template>

<script lang="ts">
import { defineComponent, ref } from "@vue/runtime-core";
import { questionsViews } from "@/models/views";
import { toGetLatestQuestions } from "@/utils/views";

export default defineComponent({
    created(){
        this.setQuestions();
    },
    setup(){
        return {
            questions: ref<questionsViews[]>(),
        }
    },
    methods: {
        link2question(){
            this.$router.push('/questions');
        },
        link2questionnum(name: string){
            this.$router.push('/questions/' + name);
        },
        getDifficultyColor(difficulty: string){
            let diffiColors = [
                {difficulty: '简单', type: 'success'},
                {difficulty: '一般', type: 'warning'},
                {difficulty: '困难', type: 'error'},
            ]
            for(let i = 0; i < diffiColors.length; i++){
                if (difficulty == diffiColors[i].difficulty){
                    return diffiColors[i].type;
                }
            }
        },
        async setQuestions() {
            const data = await toGetLatestQuestions();
            if (data) {
                this.questions = data;
            }
        }
    }
})
</script>